<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表格</title>

        <style type="text/css">
            table { margin: 25px auto ; }

            .first { 
                border: 1px solid blue ;
            }

            /* 后代选择器 ( 注意 选择祖先的选择器 和 选择子孙的选择器 之间使用空格隔开 )*/
            .first td {
                border: 1px solid blue ;
                width: 200px ;
                height: 50px ;
            }

            .second { 
                border: 1px solid green ;
                /* 使用 border-spacing 可以设置 表格内 单元格边框 之间的举例 */
                border-spacing: 20px ;
            }

            /* 后代选择器*/
            .second td {
                border: 1px solid green ;
                width: 200px ;
                height: 50px ;
            }

            .third { 
                border: 1px solid red ;
                /* separate 表示拆分单元格边框 */
                /* collapse 表示合并单元格边框 */
                border-collapse: separate ;
                /* 设置表格标题的位置 ( top | bottom )*/
                caption-side: bottom ;
                empty-cells: show ; /* 控制空单元格是否显示 ( show | hide ) */
            }

            .third td {
                border: 1px solid blue ;
                width: 200px ;
                height: 50px ;
            }

            .fourth {
                border: 1px solid blue ;
                border-collapse: collapse;
            }

            .fourth td {
                border-bottom: 1px solid blue ;
                width: 200px ;
                height: 50px ;
            }

        </style>

    </head>
    <body>

        <table class="first" >
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <table class="second">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

        <table class="third">
            <caption>
                <h3>学生信息表</h3>
            </caption>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>籍贯</td>
            </tr>
            <tr>
                <td>张三丰</td>
                <td>男</td>
                <td></td>
                <td>湖北</td>
            </tr>
            <tr>
                <td>方世玉</td>
                <td>男</td>
                <td>24</td>
                <td>广东</td>
            </tr>
        </table>

        <table class="fourth">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        
    </body>
</html>